<template>
  <div>
    <div id="projectDiv" v-show="showConfig.divFormVisible">
      <div class="panel-heading">
        <h5 class="panel-title text-center" >详细信息</h5>
        <div><i class="close el-icon-close" @click="ChangeProject(false)"></i></div>
      </div>
      <el-form class="projectForm" ref="elForm" :model="formData"  size="medium" label-width="100px">
      <el-tabs
        class="customer-tab"
        type="card"
        @tab-click="jump"
        v-model="tabName">
        <el-tab-pane
          v-for="(tab, index) in fieldList"
          :name="tab.name"
          :key="tab.name"
          :label="tab.desc"
        ></el-tab-pane>
      </el-tabs>
      <div
        class="scroll-content"
        @scroll="onScroll"
        :style="'overflow-x: hidden; overflow-y: auto;height:100%'"
      >
        <!-- 每一个tab -->
        <div v-for="tab in fieldList"
             :ref="tab.name"
             class="scroll-item"
             :key="tab.name"
        >
          <div class="line-name">
            <div class="tabTitle">{{ tab.desc }}</div>
          </div>
          <div  style="margin: 10px -10px;height: auto;font-size: 16px;" v-for="(item,index) in tab.content" :key="item.name">
            <el-row :gutter="20">
              <el-col :span="11">
                <div class="grid-content  gctitle">{{ item.alia }}：</div>
              </el-col>
              <el-col :span="11">
                <div class="grid-content gcvalue" >{{ curDetail[item.name] }}</div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-form>
    </div>
    <div id="photoDiv" v-show="showConfig.divPhotoVisible">
      <div class="panel-heading">
        <h5 class="panel-title text-center">照片信息</h5>
        <div><i class="close el-icon-close" @click="ChangePhoto(false)"></i></div>
      </div>
      <div  style="width:100%; max-height:600px;text-align:center;top: 28px;position: relative;">
        <swiper ref="mySwiper" :options="swiperOption" >
          <swiper-slide class="item-device" v-for="(item, index) in imgs" :key="index">
            <div class="device">
              <div class="dev-img" @click="showVideo(index)">
                <img class="picture" :src="item.pic" alt="">
              </div>
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
<!--        <img class="picture" :src="pictureSrc" />-->
      </div>
      <div class="messageDiv">
        <div class="photoTitle">拍摄信息</div>
        <el-form class="photomessForm" ref="photomessForm" :model="formData"  size="medium" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content  gctitle">照片名称：</div>
            </el-col>
            <el-col :span="14">
              <div class="grid-content gcvalue" >{{ photoConfig.fileName }}</div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content  gctitle">拍摄人员：</div>
            </el-col>
            <el-col :span="14">
              <div class="grid-content gcvalue" >{{ photoConfig.username }}</div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content  gctitle">拍摄时间：</div>
            </el-col>
            <el-col :span="14">
              <div class="grid-content gcvalue" >{{ photoConfig.time }}</div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content  gctitle">拍摄角度：</div>
            </el-col>
            <el-col :span="14">
              <div class="grid-content gcvalue" >{{ photoConfig.angle }}</div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div id="proMap">
      <div id="mouse-position" class="mouse-position"></div><!--鼠标坐标信息-->
      <MapSource ref="bottomMapSource" class="layer-switch" :map="map"></MapSource>
      <DrawPlotting ref="drawPlotting" v-if="mcShow.drawPlotting==='drawPlotting'"
                    :plotConfig="{map:map,overSource:overSource,mcShow:mcShow}"
      ></DrawPlotting>
    </div>
    <el-button
      type="danger"
      size="mini"
      class="closeCP"
      @click="closeThisCom"
    >关闭
    </el-button>
    <div ref="mapBtns" class="map-btns">
      <div class="map-btn" type="mediaShow" title="附件"
           @click="ChangePhoto(!showConfig.divPhotoVisible)">
        <i class="el-icon-picture-outline"></i><label>附件</label>
      </div>

      <div class="map-btn" type="detailShow" title="详情"
           @click="ChangeProject(!showConfig.divFormVisible)">
        <i class="el-icon-printer"></i><label>详情</label>
      </div>

      <div class="map-btn" title="定位" v-show="mcShow.loPosition">
        <i class="wyicon-dingwei1" type="localPosition" title="定位" @click="ChangeMenuCss"></i><label>定位</label>
        <div v-show="showBtn.rightbtns==='localPosition'" class="localPosition-popup">
          <div><span class="coordinateX">x：</span><span type="lon"><input type="text"
                                                                          ref="lp_coordinateX_text"
          /></span></div>
          <div><span class="coordinateY">y：</span><span type="lat"><input type="text"
                                                                          ref="lp_coordinateY_text"
          /></span></div>
          <span type="position" title="定位" @click="localPositionClickSpan">定位</span>
          <span type="Position" title="取消" @click="localPositionCloseSpan">取消</span>
        </div>
      </div>
      <div class="map-btn" type="measure" title="测量"
           v-show="setVisible([showBtn.measureLength,showBtn.measureArea,showBtn.drawPlotting])"
           @click="ChangeMenuCss"
      >
        <i class="title-btn wyicon-icon_measureTool"></i>
        <div class="sub-menu" v-show="showBtn.rightbtns==='measure'">
          <div class="map-btn " type="measureLength" title="量距" v-show="showBtn.measureLength"
               @click="mapBtnIClick"
          >
            <i class="wyicon-celiang"></i><label>量距</label>
          </div>
          <div class="map-btn " type="measureArea" title="量面积" v-show="showBtn.measureArea"
               @click="mapBtnIClick"
          >
            <i class="wyicon-map-area"></i><label>面积</label>
          </div>
          <div class="map-btn" type="drawPlotting" title="标绘" v-show="showBtn.drawPlotting"
               @click="mapBtnIClick"
          >
            <i class="wyicon-shuqian"></i><label>标绘</label>
          </div>
        </div>
        <label>测量</label>
      </div>

      <div class="map-btn" type="clearSelected" title="清除" v-show="showBtn.clearSelected"
           @click="mapBtnIClick($event),ChangeMenuCss($event)">
        <i class="wyicon-clean"></i><label>清除</label>
      </div>

    </div>
    <el-dialog
      title="观看视频"
      :visible="showConfig.dialogVideoVisible"
      width="80%"
      :before-close="CloseVideo">
      <div style="width:100%; max-height:600px;height:600px;text-align:center;">
        <video-player
          class="video-player vjs-custom-skin"
          ref="videoPlayer"
          :playsinline="true"
          :options="playerOptions"
        ></video-player>
      </div>
      <span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="CloseVideo">确 定</el-button>
        <el-button @click="CloseVideo">取 消</el-button>
			</span>
    </el-dialog>
    <el-image-viewer v-if="showConfig.dialogPhotoVisible" :on-close="ClosePhotoDialog" :url-list="[picurl]" />
  </div>
</template>

<script>
import MapSource from '@/components/Map/MapSource'
import Catalog from '@/views/business/gbzcb/Catalog'
import CbProStatisticTable from '@/views/business/gbzcb/CbProStatisticTable'
import XzqList from '@/components/Xzq/XzqList'
import ViewVerify from '@/components/Activiti/ViewVerify/ViewVerify'
import printtest from '@/views/business/gbzcb/printtest'
import { getCode, getConfigs } from '@/api/economic/basic'
import 'swiper/dist/css/swiper.css'
import { swiper,swiperSlide } from 'vue-awesome-swiper'
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import ElImageViewer  from 'element-ui/packages/image/src/image-viewer'
import globalConfig from '@/utils/GlobalConfig'
import globalmf from '@/utils/GlobalMapFunction'
import DrawPlotting from '@/components/Map/DrawPlotting'

export default {
  components: { CbProStatisticTable, XzqList, MapSource, DrawPlotting,
    Catalog,ViewVerify,printtest,swiper, swiperSlide,videoPlayer,ElImageViewer},
  name: 'economicComDetail',
  data() {
    let self = this;  // 加上这一句就OK了
    return {
      baseURL:'',
      imgs:[],
      picurl:'',
      photoConfig:{
        username:"",
        time:"",
        angle:"",
        fileName:""
      },
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.25, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时, player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [

        ],
        poster: '', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true, // 全屏按钮
        }
      },
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        on: {
          slideChangeTransitionEnd: function(){
            //页面箭头改变颜色
            self.SelectPicIcon(this.activeIndex);
          },
        }
      },
      curpro:null,
      medias:[],
      pictureSrc:'',
      photoPaths:[],
      tabIndex: '0',
      fieldList:[],
      formData:{},
      curDetail: {},
      map: null,
      viewNow: null,
      overSource: null,
      overVector: null,
      prj: null,
      prjCode: '4490',
      prjCodeStr: 'EPSG:4490',
      tabName: '基本信息',
      showConfig:{
        divFormVisible:true,
        divPhotoVisible:true,
        dialogVideoVisible:false,
        dialogPhotoVisible:false
      },
      showBtn: {
        measureLength: true,
        measureArea: true,
        drawPlotting: true,
        localPosition: true,
        rightbtns: 'allClose',
        clearSelected: true
      },
      mcShow: {
        loPosition: true,
        drawPlotting: 'allClose',//标绘
        showStatics: {
          historyproject: false,
          redline: false,
          naturalreserve: false,
          waterprotect: false,
          landspace: false
        },
        showEmptyResult:{
          historyproject: false,
          redline: false,
          naturalreserve: false,
          waterprotect: false,
          landspace: false
        }
      },
      mmConfig: {
        'extent': [110, 42, 140, 53],
        'mapRegion': {
          f_levels: 1,
          f_regioncode: 'f_regioncode',
          f_userid: -1,
          f_username: 'f_username',
          f_name: '',
          prjcode: 'EPSG:4490',
          userPrjCode: 'EPSG:4490',
          f_xmax: 140,
          f_xmin: 110,
          f_ymax: 53,
          f_ymin: 42,
          geomwkt: ''
        },
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      },
      config: {
        regionDatasourceName: null,
        regionDatasetName: null,
        regionFieldName: null,
        featurePicName: '',
        mapCenter: { x: 126, y: 46 }
      },
      selectStyle: new ol.style.Style({
        fill: new ol.style.Fill({
          color: 'rgba(250,250,250,0.2)'
        }),
        stroke: new ol.style.Stroke({
          color: '#00ffff', //'#d74a4a',
          width: 2
        }),
        image: new ol.style.Circle({
          radius: 7,
          fill: new ol.style.Fill({
            color: '#00ffff'
          })
        })
      }),
    }
  },
  created() {

  },
  mounted() {
    this.InitView()
    this.InitMap()
    this.InitMapSource()
  },
  props: {
    titles: {
      type: Array,
      default() {
        return []
      }
    },
    show: {
      type: Object,
      default: null
    },
    tableName: {
      type: String,
      default: "fytb"
    }
  },
  methods: {
    //地图按钮点击事件
    mapBtnIClick(e) {
      let that = this
      let type = e.currentTarget.getAttribute('type')
      switch (type) {
        case 'measureLength'://画线
          that.AddMeasureInteraction('LineString')
          break
        case 'measureArea'://画面
          that.AddMeasureInteraction('Polygon')
          break
        case 'drawPlotting'://标绘
          that.map.removeInteraction(that.measure)
          that.mcShow.drawPlotting = 'drawPlotting'
          break
        case 'clearSelected':
          //globalmf.clearLayerByName(that.map, 'xzqRegionLayer') //why20211111
          globalmf.removeAllDrawInteractions(that.map)
          globalmf.removeAllSnapInteractions(that.map)
          globalmf.clearSelectedFeature(that.map, that.overSource)
          break
      }
    },
    /*
    * 添加量测事件
    * @param {type} type
    * @return {undefined}
    */
    AddMeasureInteraction: function(type) {
      let that = this
      that.map.removeInteraction(that.measure)
      that.map.removeInteraction(that.snap)
      that.measure = new ol.interaction.Draw({
        source: that.overSource,
        type: type,
        snapTolerance: 20,
        style: new ol.style.Style({
          fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.2)' }),
          stroke: new ol.style.Stroke({
            color: 'rgba(0, 0, 0, 0.5)',
            lineDash: [10, 10],
            width: 2
          }),
          image: new ol.style.Circle({
            radius: 5,
            stroke: new ol.style.Stroke({ color: 'rgba(0, 0, 0, 0.7)' }),
            fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.2)' })
          })
        })
      })
      that.map.addInteraction(that.measure)
      let snap = new ol.interaction.Snap({
        source: that.overSource
      })
      that.map.addInteraction(snap)
      that.CreateMeasureTooltip()
      let listener
      that.measure.on('drawstart', function(evt) {
        that.sketch = evt.feature
        let tooltipCoord = evt.coordinate
        listener = that.sketch.getGeometry().on('change', function(evt) {
          if (that.sketch != null) {
            let geom = evt.target
            let output
            if (geom instanceof ol.geom.Polygon) {
              output = that.FormatArea(geom)
              tooltipCoord = geom.getInteriorPoint().getCoordinates()
              that.measureTooltipElement.innerHTML = output
              that.measureTooltip.setPosition(tooltipCoord)
            } else if (geom instanceof ol.geom.LineString) {
              output = that.FormatLength(geom)
              tooltipCoord = geom.getLastCoordinate()
              that.measureTooltipElement.innerHTML = output
              that.measureTooltip.setPosition(tooltipCoord)
            }
          }
        })
      }, this)
      that.measure.on('drawend', function() {
        that.measureTooltipElement.className = 'tooltip tooltip-static'
        that.measureTooltip.setOffset([0, -7])
        that.sketch = null
        that.measureTooltipElement = null
        that.CreateMeasureTooltip()
        ol.Observable.unByKey(listener)
      }, this)
    },
    CreateMeasureTooltip: function() {
      let that = this
      if (that.measureTooltipElement) {
        that.measureTooltipElement.parentNode.removeChild(that.measureTooltipElement)
      }
      that.measureTooltipElement = document.createElement('div')
      that.measureTooltipElement.className = 'tooltip tooltip-measure'
      that.measureTooltip = new ol.Overlay({
        id: 'measureResult',
        element: that.measureTooltipElement,
        offset: [0, -15],
        positioning: 'bottom-center'
      })
      that.map.addOverlay(that.measureTooltip)
    },
    //距离测量用到的
    FormatLength: function(line) {
      let that = this
      let output
      let length = ol.sphere.getLength(line, {
        projection: that.map.getView().getProjection().getCode(),
        radius: 6378137
      })
      if (length > 100) {
        output = (Math.round(length / 1000 * 100) / 100) +
          ' ' + 'km'
      } else {
        output = (Math.round(length * 100) / 100) +
          ' ' + 'm'
      }
      return output
    },
    //面积测量用到的
    FormatArea: function(polygon) {
      let that = this
      let area = ol.sphere.getArea(polygon, {
        projection: that.map.getView().getProjection().getCode(),
        radius: 6378137
      })
      let output
      if (area > 10000) {
        output = (Math.round(area / 1000000 * 100) / 100) +
          ' ' + 'km<sup>2</sup>'
      } else {
        output = (Math.round(area * 100) / 100) +
          ' ' + 'm<sup>2</sup>'
      }
      return output
    },
    setVisible: function() {
      return function(arg1) {
        let result = false
        for (let i = 0; i < arg1.length; i++) {
          if (arg1[i] === true) {
            result = true
          }
        }
        return result
      }
    },
    localPositionClickSpan() {//输入坐标后，点击定位，执行函数
      var lon = parseFloat(this.$refs.lp_coordinateX_text.value)
      var lat = parseFloat(this.$refs.lp_coordinateY_text.value)
      if (lon <= 180 && lon >= -180 && lat <= 90 && lat >= -90) {
        let geom = new ol.geom.Point([lon, lat])
        let feature = new ol.Feature({
          geometry: geom
        })
        this.overSource.addFeature(feature)
        this.map.getView().fit(geom, { maxZoom: 12 })
      } else {
        alert('坐标范围错误')
        return
      }
    },
    localPositionCloseSpan(e) {//showBtn.rightbtns
      this.showBtn.rightbtns = 'allClose'
    },
    ChangeMenuCss(e) {
      let that = this
      let type = e.currentTarget.getAttribute('type')
      if (this.showBtn.rightbtns === type) {
        this.showBtn.rightbtns = 'allClose'
      } else {
        this.showBtn.rightbtns = type
      }
    },
    jump(tab, event) {
      let target = document.querySelector('.scroll-content')
      let scrollItems = document.querySelectorAll('.scroll-item')
      // 判断滚动条是否滚动到底部
      if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
        this.tabIndex = tab.index.toString()
      }
      let totalY = scrollItems[tab.index].offsetTop - scrollItems[0].offsetTop // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)
      let distance = document.querySelector('.scroll-content').scrollTop // 滚动条距离滚动区域顶部的距离
      // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滚动条距离滚动区域顶部的距离(滚动区域为窗口)
      // 滚动动画实现, 使用setTimeout的递归实现平滑滚动，将距离细分为50小段，10ms滚动一次
      // 计算每一小段的距离
      let step = totalY / 10
      if (totalY > distance) {
        smoothDown(document.querySelector('.scroll-content'))
      } else {
        let newTotal = distance - totalY
        step = newTotal / 10
        smoothUp(document.querySelector('.scroll-content'))
      }

      // 参数element为滚动区域
      function smoothDown(element) {
        if (distance < totalY) {
          distance += step
          element.scrollTop = distance
          setTimeout(smoothDown.bind(this, element), 10)
        } else {
          element.scrollTop = totalY
        }
      }

      // 参数element为滚动区域
      function smoothUp(element) {
        if (distance > totalY) {
          distance -= step
          element.scrollTop = distance
          setTimeout(smoothUp.bind(this, element), 10)
        } else {
          element.scrollTop = totalY
        }
      }
    },
    // 滚动条滚动
    onScroll(e) {
      let scrollItems = document.querySelectorAll('.scroll-item')
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge =
          e.target.scrollTop >=
          scrollItems[i].offsetTop - scrollItems[0].offsetTop - 400
        if (judge) {
          this.tabIndex = i.toString()
          // 找对应的tab-name值
          this.tabName = this.fieldList[this.tabIndex].name
          break
        }
      }
    },
    closeThisCom() {
      let that=this;
      that.show.detailShow=false;
    },
    InitMapSource() {
      let that = this
      if (process.env.NODE_ENV === 'development') {
        this.baseURL = process.env.VUE_APP_BASE_API
      } else {
        this.baseURL =globalConfig.spbtdir.ruoyiurl
      }
      that.overSource = new ol.source.Vector({ crossOrigin: 'anonymous', wrapX: false })
      that.overVector = new ol.layer.Vector({
        source: that.overSource,
        style: new ol.style.Style({
          fill: new ol.style.Fill({
            color: 'rgba(100,100,100,0.2)'
          }),
          stroke: new ol.style.Stroke({
            color: '#005aff', //'#d74a4a',#ffcc33
            width: 2
          }),
          image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
              color: '#005aff'
            })
          })
        })
      })
      that.map.addLayer(that.overVector)
      that.overVector.setZIndex(9999)
    },
    InitMap() {
      var that = this
      that.map = new ol.Map({
        target: 'proMap',
        controls: ol.control.defaults({
          attributionOptions: ({
            collapsible: false//2022年2月28日 LQ 很诡异，map的一堆control初始都有问题。
          })
        }).extend([
          new ol.control.MousePosition({//2022年2月28日 LQ，这两个Control位置有问题，等到有空的时候看看
            coordinateFormat: ol.coordinate.createStringXY(4),
            className: 'custom-mouse-position',
            target: document.getElementById('mouse-position'),
            undefinedHTML: '&nbsp;'
          }),
          new ol.control.ScaleLine()//2022年2月28日 LQ，这两个Control位置有问题，等到有空的时候看看
        ]),
        view: that.viewNow
      })
    },
    InitView() {
      var that = this
      //2021年10月15日 LQ  3857的view
      var resolutions3857 = []
      var matrixIds3857 = new Array(22)
      for (var z = 0; z < 22; ++z) {
        resolutions3857[z] = 156543.033928041 / Math.pow(2, z)
        matrixIds3857[z] = z
      }
      var envelope3857 = {}
      envelope3857.left = -20037508.3427892
      envelope3857.bottom = -20037508.3427892
      envelope3857.right = 20037508.3427892
      envelope3857.top = 20037508.3427892
      that.prj3857 = ol.proj.get('EPSG:3857')
      that.prj3857.setExtent([envelope3857.left, envelope3857.bottom, envelope3857.right, envelope3857.top])
      that.prj3857.setWorldExtent([envelope3857.left, envelope3857.bottom, envelope3857.right, envelope3857.top])
      that.view3857 = new ol.View({
        projection: that.prj3857,
        resolutions: resolutions3857,
        center: [14357455, 5806768],
        zoom: 9
      })
      that.view3857.setMinZoom(9) //最小放大到9级，8级的话 平面坐标显示就有问题了
      //2021年10月15日 LQ  4490的view
      var topResolution = 360.0 / 512
      var resolutions = []
      for (var zoom = 0; zoom < 22; zoom++) {
        resolutions.push(topResolution / Math.pow(2, zoom))
      }
      proj4.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs')
      that.prj = ol.proj.get(that.prjCodeStr)
      var envelope = {}
      envelope.left = -180
      envelope.bottom = -90
      envelope.right = 180
      envelope.top = 90
      that.prj.setExtent([envelope.left, envelope.bottom, envelope.right, envelope.top])
      that.prj.setWorldExtent([envelope.left, envelope.bottom, envelope.right, envelope.top])
      that.view4490 = new ol.View({
        projection: that.prj, //ol.proj.get("EPSG:4326"),
        resolutions: resolutions,
        center: [that.config.mapCenter.x, that.config.mapCenter.y],
        zoom: 6
      })
      //按照用户选择投影坐标系
      that.viewNow = that.view4490
    },
    showVideo(index){
      let that = this;
      let media=that.medias[index];
      if(media.fileName.endsWith("mp4")){
        that.showConfig.dialogVideoVisible=true;
        let path = that.tableName + "/" + media.fileName;//fytb/2.png
        let videourl=that.baseURL + "img/" + path;
        that.playerOptions.sources.push({
          type: 'video/mp4', // 类型
          src:videourl,
        })
      }else{
        that.showConfig.dialogPhotoVisible=true;
        let path = that.tableName + "/" + media.fileName;//fytb/2.png
        let videourl=that.baseURL + "img/" + path;
        that.picurl=videourl;
      }
    },
    SelectPicIcon(index) {
      let that = this;
      let features = that.overSource.getFeatures();
      //拍摄信息显示
      let media=that.medias[index];
      that.photoConfig.username=media.username;
      that.photoConfig.time=media.time;
      that.photoConfig.angle=media.angle;
      that.photoConfig.fileName=media.fileName;
      for (let i in features) {
        let feature = features[i];
        let indexPic = feature.get("index");
        if (indexPic) {
          let angle = that.medias[indexPic].angle;//@/assets/images/
          if (indexPic == index) {
            feature.setStyle(new ol.style.Style({
              image: new ol.style.Icon({
                anchor: [0.5, 1],
                src: require(`@/assets/images/icon/direction-icon-checked.png`),
                rotation: angle / 180 * Math.PI
              })
            }));
          } else {
            feature.setStyle(new ol.style.Style({
              image: new ol.style.Icon({
                anchor: [0.5, 1],
                src: require(`@/assets/images/icon/direction-icon.png`),
                rotation: angle / 180 * Math.PI
              })
            }));
          }
        }
      }
    },
    InitiProMap() {
      let that = this;
      if (that.curpro["fx"] != null && that.curpro["fx"] != 0
        && that.curpro["fy"] != null && that.curpro["fy"] != 0) {
        that.config.mapCenter.x = that.curpro["fx"];
        that.config.mapCenter.y = that.curpro["fy"];
      }

      let geometry = new ol.geom.Point([that.config.mapCenter.x, that.config.mapCenter.y], "XY");
      let extent = geometry.getExtent();
      //globalmf.zoomToExtent(that.map, extent);
      var fea = new ol.Feature({
        geometry: geometry,
      });
      //fea.set("featureid", that.selectFeatureId);
      fea.setStyle(that.selectStyle);
      that.overSource.clear();
      that.overSource.addFeature(fea);
      globalmf.ZoomToOverSource(that.map, that.overSource);
      that.map.getView().setZoom(10);

      //在C盘文件夹搜索照片
      if (that.curpro["fMedia"] != null) {//显示照片小箭头
        that.medias = JSON.parse(that.curpro["fMedia"]);
        let style;
        if(that.medias.length>0) {
          for (let m in that.medias) {
            let path = that.tableName + "/" + that.medias[m].fileName;//fytb/2.png
            let angle = that.medias[m].angle;//@/assets/images/
            style = function() {
              return new ol.style.Style({
                image: new ol.style.Icon({
                  anchor: [0.5, 1],
                  src: require(`@/assets/images/icon/direction-icon.png`),
                  rotation: angle / 180 * Math.PI
                })
              });
            };
            var iconFeature = new ol.Feature({
              geometry: geometry,
              name: path,
              index: m
            });
            iconFeature.setStyle(style);
            that.overSource.addFeature(iconFeature);

            if (path.endsWith("mp4")) {
              that.imgs.push({
                "pic": require(`@/assets/images/icon/videoplay.jpeg`),
                "angle": angle
              });
            } else {
              that.imgs.push({
                "pic": that.baseURL + "img/" + path,
                "angle": angle
              });
            }

          }
          that.SelectPicIcon(0);
          let selectFeatureInteraction = new ol.interaction.Select({
            condition: ol.events.condition.click,
            layers: [that.overVector]
          });
          that.map.addInteraction(selectFeatureInteraction);
          selectFeatureInteraction.on('select', function(e) {
            if (e.selected.length < 1) {
              return;
            }
            let feature = e.selected[0];
            that.SelectPicIcon(feature.get('index'));
            that.$refs.mySwiper.swiper.slideTo(feature.get('index'), 0, true);
            that.$nextTick(() => {//要加上这句，不然就是弹窗后旧的图片会一闪而过。
              that.config.divPhotoVisible = true;
            });
          });
        }else{
          that.showConfig.divPhotoVisible = false;
        }
      }else{
        that.showConfig.divPhotoVisible = false;
      }

    },
    getCurrentProDetails(curpro) {
      let that=this;
      that.curpro=curpro;
      getConfigs({
        "tabel_name":that.tableName
      }).then(response => {
        let json=response;
        that.fieldList=json.fieldList;
        for(let i in that.fieldList){
          let content=that.fieldList[i].content;
          for(let j in content){
            let key=content[j].name;
            let value=curpro[key];
            if(key=="fX"||key=="fY"){
              value=curpro[key.toLowerCase()]
            }
            that.curDetail[key]=value;
          }
        }
        that.InitiProMap();
      })
    },
    /*CloseProject(){
      let that = this;
      that.showConfig.divFormVisible = false;
    },*/
    /*ClosePhoto(){
      let that = this;
      that.showConfig.divPhotoVisible = false;
    },*/
    ChangeProject(show){
      let that = this;
      that.showConfig.divFormVisible = show;
    },
    ChangePhoto(show){
      let that = this;
      that.showConfig.divPhotoVisible = show;
    },
    CloseVideo(){
      let that = this;
      that.showConfig.dialogVideoVisible = false;
    },
    ClosePhotoDialog(){
      let that = this;
      that.showConfig.dialogPhotoVisible = false;
    },
  }
}
</script>

<style  lang="scss" scoped>
.mouse-position {
  position: absolute;
  bottom: 45px;
}
.close{
  top: 8px;
  position: absolute;
  right: 5px;
}
.messageDiv{
  padding:10px;
  position:relative;
  top:20px;
}
.photoTitle{
  color:blue;
  font-size:16px;
}
.photomessForm{
  /*padding:10px;*/
  font-size:14px;
}
.photomessForm .el-row{
  margin:5px 0px;
}
.picture{
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
}
#photoDiv{
  position: absolute;
  top: 60px;
  left: 10px;
  width: 400px;
  background-color: rgb(41 94 92 / 80%) !important;
  box-shadow: #000 0px 0px 5px;
  z-index: 1;
  color: #FFF;
  overflow-y: auto;
  height: auto;
  max-height: 80%;
  padding-bottom: 20px;
}
#projectDiv{
  position: absolute;
  top: 50px;
  right: 40px;
  width: 331px;
  /*background-color: rgb(5 42 48 / 32%)!important;*/
  background-color: rgb(41 94 92 / 80%) !important;
  box-shadow: #000 0px 0px 5px;
  z-index: 1;
  color: #FFF;
  overflow-y: auto;
  height: 80%;
}
.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
}
#photoDiv .panel-heading{
  width: 400px;
}
.swiper-pagination{
  bottom: 4px !important;
  background-color: rgb(27 24 24 / 39%);
}
#projectDiv .panel-heading{
  width: 331px;
}
.panel-heading {
  padding: 5px 5px;
  border-bottom: 1px solid transparent;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  color: #fff;
   background-color: rgb(0 134 128 / 100%) !important;
   //border-color: #ccc;
   position: fixed;
   z-index: 2;
}
.panel {
  font-size: 20px;
  font-weight: normal;
  margin: 0px 5px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 0 4px 4px 0;
}
.customer-tab{
  display: none;
}
.projectForm {
  top: 18px;
  position: relative;
 /* position: absolute;
  top: 0px;
  left: 0;
  width: 38%;
  height: 100%;
  padding:20px*/
}

#proMap {
  position: absolute;
  top: 0px;
  right: 0;
  width: 100%;
  height: 100%;
}
.scroll-content{
  padding:20px;
}
/*地图操作*/
.layer-switch {
  right: 8px;
  bottom: 40px;
  display: block;
  background-color: rgba(255, 255, 255, .5) !important;
  padding: 3px 3px 0px 3px;
  height: 30px;
  /* margin-bottom: 13px; */
  font-size: 16px;
  position: absolute;
  z-index: 1;
  border-radius: 4px;
  box-shadow: #000 0px 0px 5px;
}

.ol-scale-line {
  bottom: 25px !important;
}

.map-btns {
  position: absolute;
  z-index: 1;
  right: 8px;
  bottom: 70px;
  display: block;
  padding: 3px 3px 0px 3px;
  background-color: rgba(255, 255, 255, .5);
  border-radius: 4px;
}

.closeCP {
  position: absolute;
  z-index: 1;
  right: 15px;
  top: 10px;
  display: block;
  /*padding: 3px 3px 0px 3px;*/
  /*color: rgba(255, 249, 249);*/
  /*border-radius: 4px;*/
  /*background-color: #2fcba8;*/
  /*border-color: #ccc;*/
  /*height: 30px;*/
  /*width: 40px;*/
}

.map-btn {
  height: 30px;
  margin-bottom: 13px;
  font-size: 16px;
  line-height: 1.5;
}

.map-btns i {
  color: #ffffffeb;
  cursor: pointer;
  width: 25px;
  height: 25px;
  border-radius: 4px;
  display: inline;
  padding: 4px;
  background-color: #008680;
  border-color: #ccc;
}

.map-btn .sub-menu {
  right: 31px;
  display: flex;
  background-color: rgba(255, 255, 255, .5);
  position: absolute;
  margin-top: -25px;
  height: 46px;
  box-shadow: #000 0px 0px 5px;
  border-radius: 4px;
  padding: 4px;
}

.map-btn label {
  display: block;
  color: #000000;
  font-weight: normal;
  font-size: 6px;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.map-btn[type=mediaShow]{

}
.map-btn[type=detailShow]{

}
.sub-menu .map-btn {
  margin: 0px 2px;
}

.localPosition-popup {
  margin-left: -266px;
  margin-top: -50px;
  background-color: rgba(255, 255, 255, .5);
  width: 250px;
  height: 110px;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  line-height: 33px;
}

.localPosition-popup span[type=position] {
  background-color: #008680;
  color: #fff;
  border-radius: 5px;
  padding: 2px 10px;
  line-height: 20px;
  cursor: pointer;
  margin: 0 10px 0 10px;
}

.catalog-div {
  width: auto !important;
  height: auto !important;
  /* bottom: 160px;*/
  padding-bottom: 12px;
  margin-left: 34px;
  border-radius: 5px;
  max-width: 300px;
  /*min-width: 200px;*/
  position: absolute;
  overflow: auto;
  z-index: 100;
  top: 12px;
  background-color: #004a47ab;
}

.savebtn {
  /*background-color: #00afff;*/
  /*padding: 10px 20px;*/
  /*font-size: 14px;*/
  /*border-radius: 4px;*/
  margin-left: 50px !important;
}
.emptyinfo{
  font-size: 20px;
  margin: 50px 0px 50px 0;
  background-color: #c8ddfb;
  margin: 0px 0px 0px -80px;
}
.seeinfo{
  font-size: 20px;
  margin: 20px 0px 0px 0px;
  background-color: #d9ffe7;
}
.cbstform{
  margin: 0px 0px 0px -80px;
}

.tabTitle {
  font-size: 24px;
  padding-bottom: 20px;
}

.gcvalue {
  top: 2px;
  position: absolute;
  padding-right: 15px;
}

.gctitle {
  /*float: right;*/
}

.grid-content {
  border-radius: 4px;
//min-height: 50px;

}

::v-deep.customer-tab {
  width: 100%;
  /*height: 100%;*/
  background-color: #f5f7fa;
  padding: 4px;
}

::v-deep.el-tabs--card > .el-tabs__header {
  border-bottom: none;
  margin: 0;

.el-tabs__nav {
  /*width: 100%;*/
  display: flex;
  justify-content: space-around;
  border: none;

.el-tabs__item {
  /*width: 25%;*/
  text-align: center;
  border: none;
}

.is-active {
  border-radius: 4px;
  background-color: #34BD00FF;
  color: #fff;
}
}
}
</style>
